<template>
  <div class="ShoppingCart">
    <div class="navbar">
      <svg
        viewBox="0 0 1000 1000"
        class="demo-nav__back"
        @click="toBack()"
      >
        <path
          fill="#969799"
          fill-rule="evenodd"
          d="M296.114 508.035c-3.22-13.597.473-28.499 11.079-39.105l333.912-333.912c16.271-16.272 42.653-16.272 58.925 0s16.272 42.654 0 58.926L395.504 498.47l304.574 304.574c16.272 16.272 16.272 42.654 0 58.926s-42.654 16.272-58.926 0L307.241 528.058a41.472 41.472 0 0 1-11.127-20.023z"
        >
        </path>
      </svg>
      <span class="title">购物车</span>
    </div>

    <!-- 全选 -->
    <div>
      <p
        style="font-size: 0.8rem;margin: 1rem"
        align="left"
      >共{{Cart.length}}件商品</p>
    </div>
    <div style="">
    <div  v-for="items in Cart"
          class="ShoppingCart-content" style="border-bottom: 1px solid #b2b2b2">
      <div style="margin-left:1rem;" align="left">
        <van-icon
          name="shop-o"
          size="15"/>
        <span style="">{{items.shopsName}}</span>
        <!--<span style="color: red;font-size: 0.8rem;position: absolute;right: 0.1rem;margin-right: 1rem">领券</span>-->
      </div>

      <van-checkbox-group v-model="result" ref="checkboxGroup" style="margin-left: 20px">
        <van-checkbox :name="items">
          <div style="margin: 0.5rem 0">
            <!-- 左对齐 -->
            <van-row type="flex">
              <van-col span="6">
                <van-image
                  width="4rem"
                  height="4rem"
                  fit="cover"
                  :src="items.picUrl"
                />
              </van-col>
              <van-col span="15" style="margin-left:25px;margin-top: 10px">
                <p
                  style="font-size: 0.8rem;"
                  align="left"
                >{{items.labelName}}</p>
                <p
                  style="font-size: 0.6rem;padding-top: 0.5rem"
                  align="left"
                >
                  <van-row >
                    <van-col span="12">
                      <span style="color: #999999;">{{items.productName}}</span>
                    </van-col>
                    <van-col
                      span="3"
                      style="width:90px"
                    >
                      <span style="font-size: 0.8rem">￥{{items.labelPrice}}</span>
                      <span style="font-size: 0.8rem;margin-left: 20px">×{{items.productNumber}}</span>
                    </van-col>
                  </van-row>
                </p>
              </van-col>
            </van-row>
          </div>
        </van-checkbox>
      </van-checkbox-group>
    </div>
    </div>

    <van-submit-bar :price="money" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="checked" @click="quanXuan()">全选</van-checkbox>
    </van-submit-bar>

    <!--<van-submit-bar-->
      <!--:price="money"-->
      <!--button-text="提交订单"-->
      <!--@submit="onSubmit"-->
    <!--/>-->
    <!--引入购物车列表组件-->
    <!--<car-list :carList.sync="list"></car-list>-->
  </div>
</template>

<script>
  import { getShopping } from "@/api/commodity/shop_cart.js"
  import { selectOrderShoppingCart } from '@/api/commodity/shopping_cart.js'
  import carList from './components/car-list'
  import { Toast } from "vant";
export default {
  name: 'ShoppingCart',
  components: {
    'car-list': carList
  },
  data () {
    return {
      //全选
      checked:false,
      //金额
      money:0,
      //购物车选中物品集合
      result: [],
      //购物车的所有商品集合
      Cart:[],

    }
  },
  //监听选中购物车商品
  watch:{
    result:{
      handler(newVal) {
        console.log(newVal,"11111111");
        if(newVal != 0){
          if(newVal.length == this.Cart.length){
            this.checked = true;
          }else {
            this.checked = false;
          };
        };
        this.money = 0;
        newVal.forEach(item => {
          console.log(item,"6666");
          this.money = this.money + (item.labelPrice*item.productNumber*100);
        })
      },
      immediate: true,
    },
    // checked:{
    //   handler(newVal) {
    //     console.log(newVal,"22222");
    //     if(newVal == true){
    //       this.result = this.Cart;
    //     }
    //   },
    //   deep: true,
    //   immediate: true,
    // },

  },
  methods: {
    //全选（使用中）
    quanXuan(){
      if(this.checked == true){
        this.result = this.Cart;
      }else if(this.checked == false){
        this.result = [];
      }
    },
    //全选
    checkAll() {
      // this.$nextTick(() => {
      //   this.$refs.checkboxGroup.toggleAll(true);
      // });
      this.$refs.checkboxGroup.toggleAll(true);
    },
    //取消全选
    toggleAll() {
      // this.$nextTick(() => {
      //   this.$refs.checkboxGroup.toggleAll();
      // });
      this.$refs.checkboxGroup.toggleAll();
    },
    // 返回上一页
    toBack () {
      this.$router.go(-1);//返回上一层
      // this.$router.push({ path:'/my_index'},);
    },
    // 提交
    onSubmit () {
      if(this.result.length>0){
        sessionStorage.setItem('resultList',JSON.stringify(this.result));
        this.$router.push({ path:'/shoppingCartDetails'});
      }else {
        Toast({
          message: "请选择商品",
          position: "top",
        });
      }
    },
    //查询购物车列表
    getSelectOrderShoppingCart(){
      selectOrderShoppingCart().then((res)=>{
        this.Cart = res.data.data;
        console.log(res);
      })
    },
    // //获取该用户的购物车
    // getShopping(){
    //   getShopping().then(res=>{
    //     this.Cart = res.data;
    //     console.log(res,"123456789")
    //   })
    // },

  },
  //页面渲染前加载
  created() {
    this.getSelectOrderShoppingCart();
  },

}
</script>

<style scoped>
.gwc {
  color: rgba(16, 16, 16, 100);
  font-size: 20px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin: 4px 0 0 14px;
}

.goods {
  color: rgba(126, 125, 125, 100);
  font-size: 12px;
  text-align: left;
  font-family: PingFangSC-regular;
  margin: 9px 0 0 14px;
}

.navbar .demo-nav__back {
  position: absolute;
  top: 50%;
  left: 16px;
  width: 24px;
  transform: translateY(-50%);
  height: 24px;
  cursor: pointer;
}

.navbar .jinru {
  height: 100%;
}

.navbar {
  width: 100%;
  height: 44px;
  background-color: #ffffff;
  border-bottom: 1px solid rgba(239, 239, 239, 100);
  position: relative;
  line-height: 44px;
}
  .ShoppingCart-content{
    margin-bottom: 10px;
  }
  .ShoppingCart{
    margin-bottom: 50px;
  }
</style>
